<template>
	<view>
		<view class="navbar">
			<!-- 状态栏 -->
			<view :style="{height: statusHeight + 'px'}"></view>
			<!-- 内容栏 -->
			<view class="search-content" :style="{height: searchContentHeight + 'px',width: searchContentWidth + 'px'}">
				<view class="search">
					<view class="search-image">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view class="search-text">人工智障、宇宙探索</view>
				</view>
			</view>
		</view>
		<!-- 垫高栏 -->
		<view :style="{height: searchContentHeight + statusHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusHeight: 20,
				searchContentHeight: 45,
				searchContentWidth: 375,
			};
		},
		created() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusHeight = systemInfo.statusBarHeight
			this.windowWidth = systemInfo.windowWidth

			// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
			// 获取胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo)
			this.searchContentHeight = (menuButtonInfo.bottom - this.statusHeight) + (menuButtonInfo.top - this.statusHeight)
			// 缩短搜索栏
			this.searchContentWidth = menuButtonInfo.left
			// #endif
		}
	}
</script>

<style lang="scss">
	@import '../../common/css/icons.css';
	.navbar {
		width: 100%;
		background-color: $mk-base-color;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		.search-content {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 0px 15px;
			.search {
				width: 100%;
				height: 30px;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 0px 15px;
				border-radius: 30px;
				.search-image {
					// height: 10px;
					// width: 10px;
					// border: 1px solid red;
					margin-right: 10px;
				}
				.search-text {
					font-size: 12px;
					color: #999;
				}
			}
		}

	}
</style>
